<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式代码的初始化 */
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #abddfe;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
                             'Microsoft YaHei', Arial, 'sans-serif';
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        /* 代码主体 */
        .box{
            width: 1230px;
            height: 428px;
            background: #fff;
            margin: 100px auto 0;
        }
        /* 左侧-内容 */
        .box .content{
            width: 920px;
            /* 子元素高度填满父元素的方法 */
            /* height: 428px; */
            /* height: inherit; */
            height: 100%;
            /* background: lawngreen; */
            /* 浮动 */
            float: left;
        }
        /* 右侧-广告 */
        .box .slide{
            width: 290px;
            height: inherit;
            /* background: lightcoral; */
            float: right;
        }
        /* 左侧-上-导航 */
        .nav{
            height: 60px;
            background: linear-gradient(to right, #1f9ee9, #a87ce3);
            text-align: center;
            line-height: 60px;
        }
        .nav h1{
            float: left;
            font-size: 18px;
            color: #fff;
            margin-left: 20px;
        }
        .nav a.other{
            float: right;
            font-size: 14px;
            color: #fff;
            margin-right: 20px;
        }
        .nav a.other:hover{
            background: transparent;
            color: #ABDDFE;
        }
        .nav a.nav_item{
            line-height: 28px;
            display: inline-block;
            font-size: 14px;
            padding: 0 10px;
            border-radius: 3px;
            color: #6E5800;
            margin-right: 20px;
        }
        .nav a:nth-of-type(1){background: #FFDF5E;}
        .nav a:nth-of-type(2){background: #60BDFE;}
        .nav a:nth-of-type(3){background: #9CE280;}
        .nav a:nth-of-type(4){background: #45D2C1;}
        .nav a:nth-of-type(5){background: #FEA7CA;}
        .nav a.nav_item:hover{
            background: #0061a4;
            color: #fff;
        }
        /* 左侧-下-内容列表 */
        .list{
            height: 368px;
            /* background: lawngreen; */
        }
        /* 左侧 */
        .list_left{
            width: 287px;
            height: inherit;
            background: red;
            float: left;
        }
        .list_left .left_title{
            height: 103px;
            background: #D1E7F4;
            padding: 23px 14px 0 13px;
        }
        /* 上-标题 */
        .left_title h2,
        .list_right ul li .right_title h2{
            font-size: 16px;
            font-weight: bold;
            color: #333;
            line-height: 24px;
        }
        .left_title h2 i,
        .list_right ul li .right_title h2 i{
            color: #0061A4;
            margin-right: 6px;
        }
        .left_title p,
        .list_right ul li .right_title p{
            margin-top: 13px;
            line-height: 14px;
            font-size: 12px;
        }
        .list_left img{
            display: block;
            width: inherit;
            height: 242px;
        }
        /* 右侧 */
        .list_right{
            width: 613px;
            height: inherit;
            /* background: yellowgreen; */
            float: right;
        }
        .list_right ul{
            width: inherit;
            height: inherit;
        }
        .list_right ul li{
            height: 122px;
            border-bottom: 1px solid #CBCBCB;
        }
        .list_right ul li:last-child{
            border-bottom: none;
        }
        /* 左侧---二级右侧部分--标题 */
        .list_right ul li img{
            width: 160px;
            height: 100px;
            display: block;
            float: left;
            margin: 11px 0 10px;
        }
        .right_title{
            float: right;
        }
        .list_right ul li .right_title{
            width: 443px;
            height: auto;
        }
        .list_right ul li .right_title h2{
            margin-top: 26px;
        }
        /* 右侧-广告 */
        .slide a img{
            display: block;
            margin-bottom: 10px;
        }
        .slide a:nth-of-type(3) img{
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <!-- 容器盒子 -->
    <div class="box">
        <!-- 左侧-内容 -->
        <div class="content">
            <!-- 上-导航 -->
            <div class="nav">
                <!-- 左浮动 -->
                <h1>精品线路</h1>
                <!-- 超链接居中 -->
                <a class="nav_item" href="">金砖雅游</a><a class="nav_item" href="">夜游厦门</a><a class="nav_item" href="">鼓浪屿世界经典遗产</a><a class="nav_item" href="">自驾游</a><a class="nav_item" href="">周边游</a>
                <!-- 右浮动 -->
                <a href="" class="other">其他线路 &gt;</a>
            </div>
            <!-- 下-内容列表 -->
            <div class="list">
                <!-- 左侧 -->
                <div class="list_left">
                    <div class="left_title">
                        <h2>
                            <i>01</i>万国建筑世遗之旅
                        </h2>
                        <p>荟萃了上千座中西合璧、 风格各异的中外建筑</p>
                    </div>
                    <img src="./imgs/kd1.jpg" alt="">
                </div>
                <!-- 右侧 -->
                <div class="list_right">
                    <ul>
                        <li>
                            <img src="./imgs/kd2.jpg" alt="">
                            <div class="right_title">
                                <h2>
                                    <i>02</i>海上看厦门
                                </h2>
                                <p>鼓浪屿犹如一张美丽的画卷展现在眼前，美不胜收</p>
                            </div>
                        </li>
                        <li>
                            <img src="./imgs/kd3.jpg" alt="">
                            <div class="right_title">
                                <h2>
                                    <i>03</i>海上看厦门
                                </h2>
                                <p>鼓浪屿犹如一张美丽的画卷展现在眼前，美不胜收</p>
                            </div>
                        </li>
                        <li>
                            <img src="./imgs/kd4.jpg" alt="">
                            <div class="right_title">
                                <h2>
                                    <i>04</i>海上看厦门
                                </h2>
                                <p>鼓浪屿犹如一张美丽的画卷展现在眼前，美不胜收</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 右侧-广告 -->
        <div class="slide">
            <!-- 图像超链接 -->
            <a href="">
                <img src="./imgs/slide1.jpg" alt="">
            </a>
            <a href="">
                <img src="./imgs/slide2.jpg" alt="">
            </a>
            <a href="">
                <img src="./imgs/slide3.jpg" alt="">
            </a>
        </div>
    </div>
</body>
</html>